﻿<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" MaintainScrollPositionOnPostback="true"
    AutoEventWireup="false" CodeFile="editSong.aspx.vb" Inherits="songEditor" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <h1>
        Edit Song</h1>
    <asp:Button ID="Button_save" runat="server" Text="Save" width="100px"/> &nbsp;&nbsp; &nbsp;&nbsp;<asp:Button ID="Button_cancel"
            runat="server" width="100px" Text="Cancel" />
    <h2>     
        Song Details</h2>
    <p>
        <i>Title: &nbsp;&nbsp;</i></p>
    <p>
        <asp:TextBox ID="textBox_songTitle" Width="800px" runat="server" /></p>
    <p>
        <i>Genre: (pick or add new)&nbsp;&nbsp;</i></p>
    <p>
        <asp:DropDownList ID="dropDownList_genres" Width="250px" runat="server">
        </asp:DropDownList>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox_newGenre" runat="server" Width="250px" />&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button_newGenre" runat="server" Width="200px" Text="Add new genre" /></p>
    <p>
        <i>Artist or band (pick or add new):&nbsp;&nbsp;</i></p>
    <p>
        <asp:DropDownList Width="250px" ID="dropDownList_bands" runat="server" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox_newBand" runat="server" Width="250px" />&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button_newBand" runat="server" Width="200px" Text="Add new artist/band" /></p>
    <h2>
        Lyrics and Chords</h2>
    <div>
        <!-- Button that toggles the view on the multiview between "custom" and "standard" chords-->
        <h3>
            Chord Selector</h3>
        <asp:Button ID="button_toggleChordChooser" runat="server" Text="Show custom chord chooser" /></div>
    <asp:MultiView ID="multiview_chordChooser" runat="server" ActiveViewIndex="1">
        <asp:View ID="view_customChordChooser" runat="server">
            <!-- View providing a visual representation of a guitar fretboard for selecting chord positions-->
            <div id="fretlabels" class="string" runat="server">
                <div class="stringlabel">
                    &nbsp;</div>
                <div class="fretlabel">
                    X</div>
                <div class="fretlabel">
                    O</div>
                <div class="fretlabel">
                    1</div>
                <div class="fretlabel">
                    2</div>
                <div class="fretlabel">
                    3</div>
                <div class="fretlabel">
                    4</div>
                <div class="fretlabel">
                    5</div>
                <div class="fretlabel">
                    6</div>
                <div class="fretlabel">
                    7</div>
                <div class="fretlabel">
                    8</div>
                <div class="fretlabel">
                    9</div>
                <div class="fretlabel">
                    10</div>
                <div class="fretlabel">
                    11</div>
                <div class="fretlabel">
                    12</div>
                <div class="fretlabel">
                    13</div>
                <div class="fretlabel">
                    14</div>
                <div class="fretlabel">
                    15</div>
                <div class="fretlabel">
                    16</div>
                <div class="fretlabel">
                    17</div>
                <div class="fretlabel">
                    18</div>
                <div class="fretlabel">
                    19</div>
                <div class="fretlabel">
                    20</div>
                <div class="fretlabel">
                    21</div>
                <div class="fretlabel">
                    22</div>
                <div class="fretlabel">
                    23</div>
            </div>
            <div id="div_string1" class="string" runat="server">
                <div class="stringlabel">
                    Top E</div>
                <div class="silent">
                    <input runat="server" id="s1xx" value="xx"   type="radio" name="string1" /><div
                        style="position: relative;">
                        <span>silent</span></div>
                </div>
                <div class="open">
                    <input runat="server" id="s100" value="00" type="radio" name="string1" /><div style="position: relative;">
                        <span>open E</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s101" value="01" type="radio" name="string1" /><div style="position: relative;">
                        <span>F</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s102" value="02" type="radio" name="string1" /><div style="position: relative;">
                        <span>F#/Gb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s103" value="03" type="radio" name="string1" /><div style="position: relative;">
                        <span>G</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s104" value="04" type="radio" name="string1" /><div style="position: relative;">
                        <span>G#/Ab</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s105" value="05" type="radio" name="string1" /><div style="position: relative;">
                        <span>A</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s106" value="06" type="radio" name="string1" /><div style="position: relative;">
                        <span>Bb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s107" value="07" type="radio" name="string1" /><div style="position: relative;">
                        <span>B</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s108" value="08" type="radio" name="string1" /><div style="position: relative;">
                        <span>C</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s109" value="09" type="radio" name="string1" /><div style="position: relative;">
                        <span>C#/Db</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s110" value="10" type="radio" name="string1" /><div style="position: relative;">
                        <span>D</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s111" value="11" type="radio" name="string1" /><div style="position: relative;">
                        <span>Eb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s112" value="12" type="radio" name="string1" /><div style="position: relative;">
                        <span>E</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s113" value="13" type="radio" name="string1" /><div style="position: relative;">
                        <span>F</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s114" value="14" type="radio" name="string1" /><div style="position: relative;">
                        <span>F#/Gb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s115" value="15" type="radio" name="string1" /><div style="position: relative;">
                        <span>G</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s116" value="16" type="radio" name="string1" /><div style="position: relative;">
                        <span>G#/Ab</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s117" value="17" type="radio" name="string1" /><div style="position: relative;">
                        <span>A</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s118" value="18" type="radio" name="string1" /><div style="position: relative;">
                        <span>Bb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s119" value="19" type="radio" name="string1" /><div style="position: relative;">
                        <span>B</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s120" value="20" type="radio" name="string1" /><div style="position: relative;">
                        <span>C</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s121" value="21" type="radio" name="string1" /><div style="position: relative;">
                        <span>C#/Db</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s122" value="22" type="radio" name="string1" /><div style="position: relative;">
                        <span>D</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s123" value="23" type="radio" name="string1" /><div style="position: relative;">
                        <span>Eb</span></div>
                </div>
            </div>
            <div id="div_string2" class="string" runat="server">
                <div class="stringlabel">
                    B</div>
                <div class="silent">
                    <input runat="server" id="s2xx" value="xx"   type="radio" name="string2" /><div
                        style="position: relative;">
                        <span>silent</span></div>
                </div>
                <div class="open">
                    <input runat="server" id="s200" value="00" type="radio" name="string2" /><div style="position: relative;">
                        <span>open B</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s201" value="01" type="radio" name="string2" /><div style="position: relative;">
                        <span>C</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s202" value="02" type="radio" name="string2" /><div style="position: relative;">
                        <span>C#/Db</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s203" value="03" type="radio" name="string2" /><div style="position: relative;">
                        <span>D</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s204" value="04" type="radio" name="string2" /><div style="position: relative;">
                        <span>Eb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s205" value="05" type="radio" name="string2" /><div style="position: relative;">
                        <span>E</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s206" value="06" type="radio" name="string2" /><div style="position: relative;">
                        <span>F</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s207" value="07" type="radio" name="string2" /><div style="position: relative;">
                        <span>F#/Gb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s208" value="08" type="radio" name="string2" /><div style="position: relative;">
                        <span>G</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s209" value="09" type="radio" name="string2" /><div style="position: relative;">
                        <span>G#/Ab</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s210" value="10" type="radio" name="string2" /><div style="position: relative;">
                        <span>A</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s211" value="11" type="radio" name="string2" /><div style="position: relative;">
                        <span>Bb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s212" value="12" type="radio" name="string2" /><div style="position: relative;">
                        <span>B</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s213" value="13" type="radio" name="string2" /><div style="position: relative;">
                        <span>C</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s214" value="14" type="radio" name="string2" /><div style="position: relative;">
                        <span>C#/Db</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s215" value="15" type="radio" name="string2" /><div style="position: relative;">
                        <span>D</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s216" value="16" type="radio" name="string2" /><div style="position: relative;">
                        <span>Eb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s217" value="17" type="radio" name="string2" /><div style="position: relative;">
                        <span>E</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s218" value="18" type="radio" name="string2" /><div style="position: relative;">
                        <span>F</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s219" value="19" type="radio" name="string2" /><div style="position: relative;">
                        <span>F#/Gb</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s220" value="20" type="radio" name="string2" /><div style="position: relative;">
                        <span>G</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s221" value="21" type="radio" name="string2" /><div style="position: relative;">
                        <span>G#/Ab</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s222" value="22" type="radio" name="string2" /><div style="position: relative;">
                        <span>A</span></div>
                </div>
                <div class="fret">
                    <input runat="server" id="s223" value="23" type="radio" name="string2" /><div style="position: relative;">
                        <span>Bb</span></div>
                </div>
            </div>
            <div id="div_string3" class="string" runat="server">
                <div class="stringlabel">
                    G</div>
                <div class="silent">
                    <input runat="server" id="s3xx" value="xx"   type="radio" name="string3" /><div
                        style="position: relative;">
                        <span>silent</span>
                    </div>
                </div>
                <div class="open">
                    <input runat="server" id="s300" value="00" type="radio" name="string3" /><div style="position: relative;">
                        <span>open G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s301" value="01" type="radio" name="string3" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s302" value="02" type="radio" name="string3" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s303" value="03" type="radio" name="string3" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s304" value="04" type="radio" name="string3" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s305" value="05" type="radio" name="string3" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s306" value="06" type="radio" name="string3" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s307" value="07" type="radio" name="string3" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s308" value="08" type="radio" name="string3" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s309" value="09" type="radio" name="string3" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s310" value="10" type="radio" name="string3" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s311" value="11" type="radio" name="string3" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s312" value="12" type="radio" name="string3" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s313" value="13" type="radio" name="string3" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s314" value="14" type="radio" name="string3" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s315" value="15" type="radio" name="string3" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s316" value="16" type="radio" name="string3" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s317" value="17" type="radio" name="string3" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s318" value="18" type="radio" name="string3" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s319" value="19" type="radio" name="string3" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s320" value="20" type="radio" name="string3" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s321" value="21" type="radio" name="string3" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s322" value="22" type="radio" name="string3" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s323" value="23" type="radio" name="string3" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
            </div>
            <div id="div_string4" class="string" runat="server">
                <div class="stringlabel">
                    D</div>
                <div class="silent">
                    <input runat="server" id="s4xx" value="xx"   type="radio" name="string4" /><div
                        style="position: relative;">
                        <span>silent</span>
                    </div>
                </div>
                <div class="open">
                    <input runat="server" id="s400" value="00" type="radio" name="string4" /><div style="position: relative;">
                        <span>open D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s401" value="01" type="radio" name="string4" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s402" value="02" type="radio" name="string4" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s403" value="03" type="radio" name="string4" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s404" value="04" type="radio" name="string4" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s405" value="05" type="radio" name="string4" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s406" value="06" type="radio" name="string4" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s407" value="07" type="radio" name="string4" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s408" value="08" type="radio" name="string4" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s409" value="09" type="radio" name="string4" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s410" value="10" type="radio" name="string4" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s411" value="11" type="radio" name="string4" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s412" value="12" type="radio" name="string4" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s413" value="13" type="radio" name="string4" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s414" value="14" type="radio" name="string4" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s415" value="15" type="radio" name="string4" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s416" value="16" type="radio" name="string4" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s417" value="17" type="radio" name="string4" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s418" value="18" type="radio" name="string4" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s419" value="19" type="radio" name="string4" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s420" value="20" type="radio" name="string4" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s421" value="21" type="radio" name="string4" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s422" value="22" type="radio" name="string4" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s423" value="23" type="radio" name="string4" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
            </div>
            <div id="div_string5" class="string" runat="server">
                <div class="stringlabel">
                    A</div>
                <div class="silent">
                    <input runat="server" id="s5xx" value="xx"   type="radio" name="string5" /><div
                        style="position: relative;">
                        <span>silent</span>
                    </div>
                </div>
                <div class="open">
                    <input runat="server" id="s500" value="00" type="radio" name="string5" /><div style="position: relative;">
                        <span>open A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s501" value="01" type="radio" name="string5" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s502" value="02" type="radio" name="string5" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s503" value="03" type="radio" name="string5" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s504" value="04" type="radio" name="string5" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s505" value="05" type="radio" name="string5" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s506" value="06" type="radio" name="string5" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s507" value="07" type="radio" name="string5" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s508" value="8" type="radio" name="string5" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s509" value="09" type="radio" name="string5" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s510" value="10" type="radio" name="string5" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s511" value="11" type="radio" name="string5" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s512" value="12" type="radio" name="string5" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s513" value="13" type="radio" name="string5" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s514" value="14" type="radio" name="string5" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s515" value="15" type="radio" name="string5" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s516" value="16" type="radio" name="string5" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s517" value="17" type="radio" name="string5" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s518" value="18" type="radio" name="string5" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s519" value="19" type="radio" name="string5" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s520" value="20" type="radio" name="string5" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s521" value="21" type="radio" name="string5" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s522" value="22" type="radio" name="string5" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s523" value="23" type="radio" name="string5" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
            </div>
            <div id="div_string6" class="string" runat="server">
                <div class="stringlabel">
                    Bottom E</div>
                <div class="silent">
                    <input runat="server" id="s6xx" value="xx"   type="radio" name="string6" /><div
                        style="position: relative;">
                        <span>silent</span>
                    </div>
                </div>
                <div class="open">
                    <input runat="server" id="s600" value="00" type="radio" name="string6" /><div style="position: relative;">
                        <span>open E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s601" value="01" type="radio" name="string6" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s602" value="02" type="radio" name="string6" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s603" value="03" type="radio" name="string6" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s604" value="04" type="radio" name="string6" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s605" value="05" type="radio" name="string6" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s606" value="06" type="radio" name="string6" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s607" value="07" type="radio" name="string6" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s608" value="08" type="radio" name="string6" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s609" value="09" type="radio" name="string6" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s610" value="10" type="radio" name="string6" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s611" value="11" type="radio" name="string6" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s612" value="12" type="radio" name="string6" /><div style="position: relative;">
                        <span>E</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s613" value="13" type="radio" name="string6" /><div style="position: relative;">
                        <span>F</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s614" value="14" type="radio" name="string6" /><div style="position: relative;">
                        <span>F#/Gb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s615" value="15" type="radio" name="string6" /><div style="position: relative;">
                        <span>G</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s616" value="16" type="radio" name="string6" /><div style="position: relative;">
                        <span>G#/Ab</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s617" value="17" type="radio" name="string6" /><div style="position: relative;">
                        <span>A</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s618" value="18" type="radio" name="string6" /><div style="position: relative;">
                        <span>Bb</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s619" value="19" type="radio" name="string6" /><div style="position: relative;">
                        <span>B</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s620" value="20" type="radio" name="string6" /><div style="position: relative;">
                        <span>C</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s621" value="21" type="radio" name="string6" /><div style="position: relative;">
                        <span>C#/Db</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s622" value="22" type="radio" name="string6" /><div style="position: relative;">
                        <span>D</span>
                    </div>
                </div>
                <div class="fret">
                    <input runat="server" id="s623" value="23" type="radio" name="string6" /><div style="position: relative;">
                        <span>Eb</span>
                    </div>
                </div>
            </div>
            <div style="clear: both">
                <br />
                <asp:Label ID="Label1" runat="server" Text="Enter your custom chord name:"></asp:Label>&nbsp;&nbsp;&nbsp;<asp:TextBox
                    ID="Textbox_chordName" runat="server"></asp:TextBox>&nbsp;&nbsp;&nbsp;<asp:Button
                        ID="Button_addChord" runat="server" Text="Add chord" /></div>
            <div style="clear: both">
            </div>
            <br />
            <asp:Label ID="Label2" runat="server" Font-Size="Small" Text="">You can also enter chord codes yourself, in the format [n1n2n3n4n5n6MyChordName] where n is the fret position on each string. Use xx for silent and 00 for open.</asp:Label><br />
        </asp:View>
        <!-- Panel providing a visual representation of commonly used chords-->
        <asp:View ID="view_standardChordChooser" runat="server">
            <br />
            <asp:Label ID="Label3" runat="server" Text="Label">Click on the chord symbols to add the chord to the Wiki</asp:Label><br />
            <div id="div_chordList" runat="server">
                <!-- ASP image buttons for each chord are added on the fly here -->
            </div>
        </asp:View>
    </asp:MultiView>
    <h3>
        Song Wiki</h3>
    <asp:Label ID="label_wikiTextPanel" runat="server"><i>Song Wiki</i></asp:Label>
    <asp:TextBox ID="textbox_songLyrics" runat="server" Width="100%" Height="125px" Wrap="true"
        TextMode="MultiLine" AutoPostBack="true"></asp:TextBox>
    <div style="clear: both" runat="server">
    </div>
    <h3>
        Song Preview</h3>
    <div id="div_preview" class="songDisplay" runat="server">
          </div>
</asp:Content>
